﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="OptimumInfra.Models" %>
<%@ Import Namespace="System.Collections.Generic" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript">
        var Product = new Array();
    </script>
     <div id="step">
        <span><%=ViewData["message"] %></span>
     </div>
    <%
        
        foreach (var category in (ViewData["cats"] as List<TemplateCategory>))
        {
            string temp = "templates" + category.Id.ToString();
            
            %>
        

          <h2 class="expand"><%= category.Name %>
                </h2>
          <div class="collapse" style="display: block;">
            <ul id="product_list" class="clear">
        <%
            foreach (var template in (ViewData[temp] as IEnumerable<ServerTemplate>))
            {
            %>           
               <li class="product">
                <%
        string image = template.Image;
        if (image == null || image == "")
            image = "../Content/images/default_image.jpg";
        else
            image = "../" + image;
             %>
               <img src="<%=image %>" width="150" height="100" alt="" title=""/>
               <div class="product_description">
               <%=Html.ActionLink(template.Name, "Detail", new { id = template.Id })%>
                <div class="price">Price: $<%=template.Price%>/month</div>
                 <div class="quatity">Quatity: <input type="text" value="1" name="quatity" id="quatity<%=template.Id %>" /></div>
                <div>
                <button onclick="javascript:addtocart(<%=template.Id %>, 1, '<%=template.Name %>',1, <%=template.Price %>)" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>          
                </div>
                </div>
                <div class="product_short">
                   <strong>Description:</strong> <br />
                    <%=template.Description %>
                </div>
                </li> 
            <%
        }
            %>
              </ul>
            </div>
        <%
        } 
         %>       
         <div class="templateBottom">
             <a href="/Resource/?step=2">Next</a>
             <a href="/Account/">Finish</a>
         </div>
     
 <script type="text/javascript">
     function addtocart(id, type, name, quatity, price) {
         var div = "quatity" + id;
         var qua = parseInt(document.getElementById(div).value);
         if (isNaN(qua)) {
             alert("Please enter a number");
             document.getElementById(div).value = "1";
             return false;
         }
         var a = Number(qua);
         if (a <= 0) { alert("Please enter positive number"); return false; }
    
         var Product = new Array();
         Product[0] = id;                         //id
         Product[1] = type;                         //type
         Product[2] = name;              //name
         Product[3] = quatity;                         //quatity
         Product[4] = price;                       //price
         Product[5] = Product[3] * Product[4];   //total

         list.add(Product);
     }
                </script>
      <script type="text/javascript">
               $(function () {
                   // --- Using the default options:
                   $("h2.expand").toggler();
                   // --- Other options:
                   //$("h2.expand").toggler({method: "toggle", speed: 0});
                   //$("h2.expand").toggler({method: "toggle"});
                   //$("h2.expand").toggler({speed: "fast"});
                   //$("h2.expand").toggler({method: "fadeToggle"});
                   //$("h2.expand").toggler({method: "slideFadeToggle"});    
                   $("#content").expandAll({ trigger: "h2.expand", ref: "div.content", localLinks: "p.top a" });

               });
</script>

</asp:Content>
